<template>
	<view class="wrap">
		<!-- 顶部标签切换 -->
		<view class="tabs">
			<view class="tab-item" v-for="(item, index) in tabsList" :key="index"
				:class="{'active': currentTab === item.value}" @tap="switchTab(item)">
				{{ item.label }}
			</view>
		</view>

		<!-- 优惠券列表 -->
		<view class="coupon-list">
			<view class="coupon-item" v-for="(item, index) in couponList" :key="index"
				:class="{'disabled': !item.available}" @tap="selectCoupon(item)">
				<view class="left">
					<view class="price">
						<text class="symbol">¥</text>
						<text class="num">{{item.couponVO.value}}</text>
					</view>
					<view class="condition">{{item.couponVO.name}}</view>
				</view>
				<view class="right">
					<view class="name">{{item.couponVO.name}}</view>
					<view class="time">{{item.couponVO.validStart}} - {{item.couponVO.validEnd}}</view>
					<view class="desc">{{item.couponVO.description}}</view>
				</view>
				<view class="select-icon" v-if="item.available">
					<u-icon :name="selectedId === item.id ? 'checkmark-circle-fill' : 'circle'"
						:color="selectedId === item.id ? '#EE2F37' : '#999'" size="40">
					</u-icon>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btn">
			<view class="btn" @tap="confirmSelect">确定选择</view>
		</view>

		<!-- 暂无优惠券提示 -->
		<view class="empty" v-if="couponList.length === 0">
			<u-empty mode="coupon" text="暂无优惠券"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getCouponList
	} from '@/request/API.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				tabsList: [{
					label: '可用优惠券',
					value: 'UNUSED'
				}, {
					label: '不可用优惠券',
					value: 'USED,EXPIRED'
				}],
				currentTab: "UNUSED",
				couponList: [],
				selectedId: '', // 选中的优惠券ID
				orderAmount: 0, // 订单金额
			}
		},
		onLoad(options) {
			if (options.amount) {
				this.orderAmount = Number(options.amount);
			}
			if (options.selectedId) {
				this.selectedId = options.selectedId;
			}
			console.log(options);
			this.getCoupons();
		},
		methods: {
			// 切换标签
			switchTab(data) {
				if (this.currentTab === data.value) return;
				this.currentTab = data.value;
				this.getCoupons();
			},
			// 获取优惠券列表
			async getCoupons() {
				try {
					const {
						data
					} = await getCouponList({
						shopId: this.shopId,
						totalAmount: this.orderAmount,
						status: this.currentTab
					});
					// 处理优惠券可用状态
					this.couponList = data.map(item => ({
						...item,
						available: this.currentTab == 'UNUSED' // 根据当前标签页设置可用状态
					}));
				} catch (error) {
					this.$u.toast('获取优惠券失败');
				}
			},
			// 选择优惠券
			selectCoupon(coupon) {
				if (!coupon.available) {
					this.$u.toast('该优惠券不可用');
					return;
				}
				this.selectedId = this.selectedId === coupon.id ? '' : coupon.id; // 支持取消选择
			},
			// 确认选择
			confirmSelect() {
				const selectedCoupon = this.couponList.find(item => item.id === this.selectedId);
				// 通过事件总线传递选中的优惠券
				uni.$emit('couponSelected', selectedCoupon);
				uni.navigateBack();
			}
		},
		computed: {
			...mapState(['shopId'])
		}
	}
</script>

<style lang="scss">
	.wrap {
		background: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;

		.tabs {
			display: flex;
			background: #fff;
			padding: 20rpx;
			position: sticky;
			top: 0;
			z-index: 1;

			.tab-item {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				color: #666;
				padding: 20rpx 0;
				position: relative;

				&.active {
					color: #EE2F37;
					font-weight: bold;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 4rpx;
						background: #EE2F37;
						border-radius: 2rpx;
					}
				}
			}
		}

		.coupon-list {
			padding: 20rpx;

			.coupon-item {
				display: flex;
				background: #fff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				position: relative;
				overflow: hidden;

				&:active {
					opacity: 0.8;
				}

				&.disabled {
					opacity: 0.6;
					background: #f5f5f5;

					&::after {
						content: '不可用';
						position: absolute;
						right: -60rpx;
						top: 20rpx;
						background: #999;
						color: #fff;
						padding: 6rpx 60rpx;
						transform: rotate(45deg);
						font-size: 24rpx;
					}
				}

				.left {
					width: 220rpx;
					background: #FEF0F0;
					padding: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						width: 20rpx;
						background: radial-gradient(circle at right, transparent 0, transparent 10rpx, #fff 10rpx);
						background-size: 20rpx 40rpx;
					}

					.price {
						color: #EE2F37;
						display: flex;
						align-items: baseline;

						.symbol {
							font-size: 32rpx;
						}

						.num {
							font-size: 60rpx;
							font-weight: bold;
							margin-left: 4rpx;
						}
					}

					.condition {
						font-size: 24rpx;
						color: #666;
						margin-top: 10rpx;
					}
				}

				.right {
					flex: 1;
					padding: 30rpx;

					.name {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 16rpx;
					}

					.time {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 12rpx;
					}

					.desc {
						font-size: 26rpx;
						color: #666;
					}
				}

				.select-icon {
					position: absolute;
					right: 30rpx;
					top: 30rpx;
				}
			}
		}

		.bottom-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			padding: 20rpx;

			.btn {
				background: #EE2F37;
				color: #fff;
				text-align: center;
				padding: 24rpx;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.empty {
			padding-top: 200rpx;
		}
	}
</style>